<template id="back">
  <div>
    <h1>个人健康管理系统</h1>
    <vue-particles
      id="particles-js"
      color="#409EFF"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="6"
      linesColor="#409EFF"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="form-class">
      <img class="logo" src="../assets/xingxielogo.png" alt />
      <el-card>
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
          <div v-if="!forgetPwd">
            <!-- 账号密码登录 -->
            <div v-if="form.type == '1'">
              <el-form-item label="账号" prop="username">
                <el-input v-model="form.username" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" />
              </el-form-item>
            </div>
            <!-- 手机验证码登录 -->
            <div v-if="form.type == '2'">
              <el-form-item label="手机号码" prop="phoneNumber">
                <el-input v-model="form.phoneNumber" />
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input v-model="form.code" placeholder="请输入验证码">
                  <el-button
                    slot="append"
                    @click="sendSms"
                    :disabled="codeDisabled"
                    >{{ codeText }}</el-button
                  >
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button
                type="primary"
                @click="submit"
                :loading="load"
                style="width: 100%"
                >{{ loginText }}</el-button
              >
              <el-button type="text" @click="forget">忘记密码？</el-button>
              <el-button type="text" @click="clickPhone"
                >手机验证码登录</el-button
              >
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入忘记密码账号的邮箱"
              />
            </el-form-item>
            <el-button type="primary" @click="findPassword" style="width: 100%"
              >找回密码</el-button
            >
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "lnogi",
  data() {
    return {
      //表单对象
      form: {
        username: null,
        password: null,
        // 1、账号密码登录 2、手机验证码登录
        type: "1",
        phoneNumber: null,
        code: null,
      },
      //表单校验规则
      rules: {
        //用户名表单校验
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            message: "请输入正确的邮手机号码",
            trigger: ["blur", "change"],
            pattren: /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/,
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      // 登录按钮文字
      loginText: "登           录",
      // 登录状态
      load: false,
      // 忘记密码
      forgetPwd: false,
      codeText: "发送验证码",
      codeDisabled: false,
    };
  },
  /** 页面加载函数 */
  created() {},
  /** 存放所有的方法 */
  methods: {
    /** 登录的方法 */
    submit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return this.$message.error("数据校验失败，请检查后提交！");
        this.load = true;
        this.loginText = "登录中...";
        //如果数据检验成功，则向后端发送请求，进行登录
        this.$ajax
          .post("/user/login", this.form)
          .then((res) => {
            const tokenBody = res.data.data;
            let tokenHead = tokenBody.tokenHead;
            let token = tokenBody.token;
            this.$store.commit("setToken", tokenHead + token);
            this.$router.push("/");
          })
          .catch(() => {
            this.load = false;
            this.loginText = "登           录";
          });
      });
    },
    /** 忘记密码 */
    forget() {
      this.forgetPwd = true;
    },
    /** 找回密码，发送邮件 */
    findPassword() {
      this.$refs.form.validate((valid) => {
        if (!valid) return this.$message.error("数据校验失败，请检查后提交！");
        //如果数据检验成功，则向后端发送请求
        this.$ajax
          .post("/tool/forget/password", { receivers: [this.form.email] })
          .then((res) => {
            if (res.data.flag) {
              this.$message.success(res.data.message);
              this.forgetPwd = false;
            }
          });
      });
    },
    /** 点击手机验证码登录 */
    clickPhone() {
      console.log(this.form.type);
      if (this.form.type == "1") {
        this.form.type = "2";
      } else {
        this.form.type = "1";
      }
      // 移除校验结果
      this.$refs.form.clearValidate();
    },
    /** 发送验证码 */
    sendSms() {
      const pattren = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      // 判断手机号码是否填写
      if (!this.form.phoneNumber)
        return this.$message.error("请输入手机号码！");
      if (!pattren.test(this.form.phoneNumber))
        return this.$message.error("请输入正确的手机号码！");
      // 发送验证码
      this.$ajax
        .post(`tool/sms?phoneNumber=${this.form.phoneNumber}`)
        .then((res) => {
          if (res.data.flag) {
            /*
             * setInterval: 每隔多少秒执行一次
             * setTimeout: 在多少秒后执行一次
             */
            let time = 60;
            const timer = setInterval(() => {
              this.codeDisabled = true;
              time--;
              if (time) {
                this.codeText = "(" + time + "秒)后重新发送";
              } else {
                clearInterval(timer);
                this.codeText = "重新发送验证码";
                this.codeDisabled = false;
              }
            }, 1000);
          }
        });
    },
  },
};
</script>

<!--将动态粒子作为背景图来用，当有新的div需要呈现时，会发现div是不能覆盖vue-particles 内容的，会依次靠后显示。
因此，加入了position:absolute，当有新div盒子的时候，设置为position:relative-->
<style scoped>
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
.form-class {
  position: relative;
  width: 30%;
  margin: 100px 650px auto;
}
.logo {
  position: relative;
  width: 160px;
  height: 160px;
}
</style>
